<template>
  <div>
    <!-- 首页 -->
    <div class="home-page">
      <van-grid>
        <van-grid-item icon="photo-o" text="可编辑111" data-edit="editKey1" />
        <van-grid-item icon="photo-o" text="可编辑222" data-edit="editKey2" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
      {{ data }}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'IndexPage',
  async asyncData({ store }) {
    await store.dispatch('home/getData')
  },
  data() {
    return {
      active: ''
    }
  },
  head() {
    return {
      title: this.data.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.data.description
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.data.keywords
        }
      ]
    }
  },
  computed: {
    ...mapState({
      data: (state) => state.home.data
    })
  }
}
</script>
<style lang="less" scoped src="~/assets/less/index.less"></style>
